<!DOCTYPE html>
<html>
<style>
  html,
  body {
    height: 100%;
  }
  .box {
    display: grid;
    height: 100%;
    /* 列宽 根据width比例算 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /* 行宽根据height来算 */
    /* 相当于 1fr 1fr 1fr */
    /* fr单位可以将容器分为几等份 */
    /* 此时行间距1%根据height 列间距根据width */
    grid-gap: 3%;
    /* grid-column-gap 和 grid-row-gap的简写 */
  }
  .item {
    border-radius: 10%;
    background-color:orange;
  }
</style>

<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

</html>